<template>
    <div class="page device-detail-view">
        <wv-header title="设备信息" fixed></wv-header>

        <div class="main-header-fixed">
            <div class="device-empty" v-if="isEmpty" @click="getDevice">
                <i class="iconfont iot-empty"></i>
                <p>设备信息获取失败，点击重试</p>
            </div>

            <div v-else class="device-info">
                <div class="banner">
                    <i class="iconfont iot-battery" :style="batteryStyle"></i>
                    <div v-if="device && device.status == 'offline' || device.status == 'fault'" style="margin-top: -25px;font-size: 12px;color: #444;">[{{ device.status_text }}]</div>
                    <div class="device-address">{{ device.full_address }}</div>
                </div>
            </div>
            <div class="port-status" v-if="device.ports">
                <div class="port-tip">
                    <span class="tip-item">
                        <i class="iconfont iot-battery-port"></i>: 空闲中
                    </span>
                    <span class="tip-item">
                        <i class="iconfont iot-battery-port-solid"></i>: 已使用
                    </span>
                    <span class="use-tip">点选插口开始充电</span>
                </div>

                <wv-grid>
                    <wv-grid-item @click="createOrder(key, status)" :key="key" v-for="(status, key) in device.ports">
                        <i :class="{iconfont:true, 'iot-battery-port': !status, 'iot-battery-port-solid': status}"
                           slot="icon"></i>
                        <span slot="label" style="text-align: center;font-size: 12px;">插口{{ key.substr(1) }}</span>
                    </wv-grid-item>
                </wv-grid>
            </div>

            <div class="use-tips-about-money" v-if="device.ladder_price">
                <div class="tip-item">
                    <i class="iconfont iot-tip" style="color: #ffc638;"></i>
                    {{ device.ladder_price.one.min }} ~ {{ device.ladder_price.one.max }}分钟：{{ device.ladder_price.one.price }}元，
                    {{ device.ladder_price.two.min }} ~ {{ device.ladder_price.two.max }}分钟：{{ device.ladder_price.two.price }}元
                </div>
                <div class="tip-item">
                    <i class="iconfont iot-tip" style="color: #ffc638;"></i>
                    {{ device.ladder_price.three.min }} ~ {{ device.ladder_price.three.max }}分钟：{{ device.ladder_price.three.price }}元，
                    {{ device.ladder_price.four.min }}分钟后：{{ device.ladder_price.four.price }}元
                </div>
                <div class="tip-item" v-if="device.superpower_multiple > 1">
                    <i class="iconfont iot-tip" style="color: #ffc638;"></i>
                    大功率充电将按照{{ device.superpower_multiple }}倍计费
                </div>
                <div class="tip-item">
                    <i class="iconfont iot-tip" style="color: #ffc638;"></i>
                    使用前请先确认您的账户余额不能少于{{ device.need_max_money }}元。
                </div>
            </div>
        </div>
        <tabbar></tabbar>
    </div>
</template>

<script>
    import tabbar from '../tabbar.vue';
    import util from '@/libs/util';

    export default {
        components: {
            tabbar
        },

        data() {
            return {
                loading: false,
                isEmpty: false,
                device: {},
                deviceSn: '',
                batteryStyle: {
                    color: '#fff'
                }
            }
        },

        created() {
            if (this.$route.query.hasOwnProperty('device_sn')) {
                this.deviceSn = this.$route.query.device_sn;
            }
            this.getDevice(this.deviceSn);
            this.deviceStatusListener(this.deviceSn);
        },

        methods: {
            getDevice(deviceSn) {
                util.api().get(`/api/devices/${deviceSn}`).then((resp) => {
                    if (resp.data.status == true) {
                        this.isEmpty = false;
                        this.formatDevice(resp.data.data);
                    } else {
                        this.$root.toast(resp.data.message);
                        this.isEmpty = true;
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '获取设备信息失败');
                })
            },

            formatDevice (device) {
                if ('online' == device.status) {
                    this.batteryStyle.color = '#08ff4f';
                } else if ('offline' === device.status) {
                    this.batteryStyle.color = '#444444';
                } else if ('fault' === device.status) {
                    this.batteryStyle.color = '#ffdb08';
                }

                this.device = device;
            },

            createOrder (key, status) {
                const that = this;
                const data = {
                    device_sn: that.deviceSn,
                    port: key
                };
                this.$root.confirm('充电完成后将从您的账户余额扣除相应的费用，您确定要使用该插口充电吗？', '确认下单', (action) => {
                    console.log(action);
                    if (status == 1) {
                        that.$root.toast('充电口正在使用中');
                    } else {
                        that.$root.loading('下单中');
                        util.api().post('/api/orders/create', data).then((resp) => {
                            that.$root.closeLoading();
                            if (resp.data.status === true) {
                                that.$root.success('下单成功，正在开启充电口');
                                that.goOrderDetail(resp.data.data.order_sn);
                            } else {
                                that.$root.error(resp.data.message);
                            }
                        }).catch((e) => {
                            that.$root.closeLoading();
                            util.handleApiException(e, that, '下单失败');
                        })
                    }
                })
            },

            goOrderDetail (order_sn) {
                this.$router.push({
                    name: 'order-detail',
                    query: {
                        orderSn: order_sn
                    }
                })
            },

            deviceStatusListener(deviceSn) {
                Echo.channel(`device-status-change.${deviceSn}`).listen('DeviceStatusChange', (e) => {
                    this.formatDevice(e.device);
                });
            }
        }
    }
</script>